<template>
  <div class="cate">
    <van-nav-bar title="商品分类" nav-bar-text-color="@white" />
    <!-- 搜索栏 -->
    <div class="top-search">
      <div class="w">
        <div class="top">
          <form class="search">
            <i class="iconfont icon-magnifier"></i>
            <input
              type="text"
              placeholder="请输入关键字"
              v-model="keywords"
              @keydown.13.prevent="
                   $router.push({path:'/goodsSearch?keywords=' + keywords,query:{path:'/index/cate'}})
              "
            />
          </form>
        </div>
      </div>
    </div>

    <!-- 主要展示区 -->
    <div class="main" v-if="cate">
      <div class="inner">
        <aside>
          <ul>
            <li class="li" v-for="(item, index) in cate" :key="item.id">
              <span
                :class="{ changeActive: active == index }"
                href="#"
                @click="changeActive(index)"
                >{{ item.catename }}</span
              >
            </li>
          </ul>
        </aside>

        <article>
          <section>
            <span>{{ title }}</span>
            <div class="figure">
              <div v-for="i in cateChildList" :key="i.id" @click="goList(i.id)">
                <img :src="$pregImg + i.img" alt="" />
                <a href="#">{{ i.catename }}</a>
              </div>
            </div>
          </section>
        </article>
      </div>
    </div>

    <!-- 固定导航栏 -->
    <div class="nav-fix">
      <div class="inner">
        <div class="top">
          <a href="">
            <img src="../../assets/images/icon/nav/home/selected.png" alt="" />
            <span>商城</span>
          </a>
          <a href="">
            <img
              src="../../assets/images/icon/nav/home/unselected.png"
              alt=""
            />
            <span>分类</span>
          </a>
          <a href="">
            <img
              src="../../assets/images/icon/nav/home/unselected.png"
              alt=""
            />
            <span>购物车</span>
          </a>
          <a href="">
            <img
              src="../../assets/images/icon/nav/home/unselected.png"
              alt=""
            />
            <span>我</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      num: 0,
      active: 0,
      selectId: 1,
      title: "电子产品",
      keywords: "",
      cateChildList: [],
    };
  },
  computed: {
    ...mapGetters({
      cate: "cate/cate",
      requestGoodsList: "goodsList/goodsActions",
      list: "searchList/list",
    }),
  },
  methods: {
    goList(id) {
      this.$router.push("/goodsList?cateid=" + id);
    },
    ...mapActions({
      requestCateActions: "cate/cateActions",
      requestList: "searchList/listActions",
    }),
    changeActive(index) {
      console.log(index);
      this.active = index;
      this.title = this.cate[index].catename;
      if (this.cate[index].children) {
        this.cateChildList = this.cate[index].children;
      } else {
        this.cateChildList = [];
      }
    },
  },
  watch: {
    cate: {
      deep: true,
      handler(v) {
        if (v[0].children) {
          this.cateChildList = v[0].children;
        }
      },
    },
  },
  // watch: {
  //   keywords(val) {
  //     this.requestList(val);
  //   },
  // },
  mounted() {
    // getCates().then((res) => {
    //   console.log(res);
    //   this.navBar = res.list;
    // });
    this.requestCateActions();
    document.title=this.$route.meta.title
  },
};
</script>

<style scoped>
.li .changeActive {
  font-size: 0.16rem;
  color: #ff6040;
}
.li span {
  color: #999999;
  font-size: 0.14rem;
  text-decoration: none;
}
/* * 顶部返回字体样式  */
/deep/.van-nav-bar {
  background: #ff6040;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  font-weight: bold;
  color: #fff;
}
/deep/ .van-nav-bar__text {
  font-size: 0.12rem;
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  font-size: 0.12rem;
  color: #fff;
}

/deep/ [class*="van-hairline"]::after {
  border: none;
}
/deep/ .van-nav-bar__content {
  height: 48px;
}

/* /deep/ [class*="van-hairline"]::after {
  border: none;
}

 */
</style>